<template>
  <el-container>
    <el-aside width="200px">
      <el-row class="tac">
        <el-col :span="24">
          <el-menu
            default-active="2"
            class="el-menu-vertical-demo"
            background-color="#4682B4"
            text-color="#fff"
            active-text-color="#ffd04b"
            @open="handleOpen"
            @close="handleClose">
            <el-menu-item index="0">
              <i class="el-icon-news"></i>
              <router-link slot="title" to="/shopprofile">店铺概况</router-link>
            </el-menu-item>

            <el-menu-item index="2">
              <i class="el-icon-goods"></i>
              <router-link slot="title" to="/goodsmanage">商品管理</router-link>
            </el-menu-item>
            <el-menu-item index="3">
              <i class="el-icon-tickets"></i>
              <router-link slot="title" to="/ordermanage">订单管理</router-link>
            </el-menu-item>
            <el-menu-item index="4">
              <i class="el-icon-setting"></i>
              <router-link slot="title" to="/clientmanage">客户管理</router-link>
            </el-menu-item>
            <el-menu-item index="5">
              <i class="el-icon-setting"></i>
              <router-link slot="title" to="/dataanalysis">数据分析</router-link>
            </el-menu-item>
            <el-menu-item index="6">
              <i class="el-icon-setting"></i>
              <router-link slot="title" to="/shopprofile">营销中心</router-link>
            </el-menu-item>
            <el-menu-item index="7">
              <i class="el-icon-setting"></i>
              <router-link slot="title" to="/shopprofile">店铺管理</router-link>
            </el-menu-item>
            <el-menu-item index="8" center>
              <i class="el-icon-setting"></i>
              <router-link slot="title" to="/shopprofile">设置</router-link>
            </el-menu-item>
          </el-menu>
        </el-col>
    </el-row>
    </el-aside>
    <el-main>
      <router-view />
  </el-container>
</template>

<script>
export default {
  name: 'App',
  methods: {
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    }
  }
}
</script>
  
<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
  .el-container {
    height: 100%;
  }
  .el-aside {
      background-color: #4682B4;
      color: #333;
      text-align: center;
      line-height: 200px;
    }
    
    .el-main {
      background-color: #E9EEF3;
      color: #333;
      text-align: center;
      line-height: 160px;
    }
  .el-menu {
    border: 0;
  }
</style>
